<template>
  <div class="app-container">
    <div class="filter-container">

      <div class="filter-item">
        <span class="span">数据源名称:</span>
        <el-select v-model="listQuery.sourceId"  placeholder="请选择所属数据源名称" style="width: 200px" @change="choseBelongs">
          <el-option v-for="(item, index) in sourceData" :key="index" :label="item.sourceName" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-item">
        <span class="span">表名称:</span>
        <el-select v-model="tableName"  placeholder="请先选择数据源" style="width: 200px" :disabled="!listQuery.sourceId">
          <el-option v-for="(item, index) in tableList" :key="index" :label="item.tableName" :value="item.tableName" />
        </el-select>
        <!-- <el-input v-model="tableName" placeholder="请选择表名称" style="width: 200px" /> -->
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <!-- <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit">
       编辑
      </el-button> -->
      <el-button v-waves class="filter-item"  icon="el-icon-refresh" @click="handleClear">
        {{ $t('table.rest') }}
      </el-button>
    </div>



    <import ref="import" template-url="/consanguinity/template" import-url="/consanguinity/import"
      @refreshList="getList" />
    <!-- <consanguinity-form ref="form" @refreshList="getList" /> -->
    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="pageArray" @pagination="getList" /> -->
    <!-- <sankey :data='data' v-if="sankeyshow" /> -->
    <blod ref="blodCharts" />

     <editList ref="editList"></editList>
  </div>
</template>

<script>
import { deleteconsanguinity, fetchconsanguinityList, exportconsanguinity } from '@/api/demo/consanguinity'
import sankey from '@/components/Charts/sankey'
import blod from '@/components/Charts/blod'
import Import from '@/components/Import/import'
import echrts from 'echarts'
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/permission'
import consanguinityForm from './consanguinityForm'
import Pagination from '@/components/Pagination'
import Sortable from 'sortablejs'
import editList from './editList.vue'
import { getSourceList } from '@/api/demo/metadataSource'
import { getTableList } from '@/api/masterdata/masterdataTable'

export default {
  name: 'consanguinityList',
  components: { consanguinityForm, Pagination, Import, sankey, blod,editList },
  directives: { waves, permission },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      sankeylist: [],
      sankeydatalist: [],
      sankeyshow: false,
      multipleSelection: [],
      downloadLoading: false,
      listLoading: true,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        sonTablename: undefined,
        pTablename: undefined,
        tableName: undefined,
        sourceId: undefined,
        sourceName: undefined,
        targetSourceid: undefined,
        targetSourcename: undefined,
        page: 1,
        limit: 999,
      },
      temp:{},
      tableData: [],
      sourceData: [],
      data: { nodes: [], links: [] },
      tableList:[],
      tableName:''//表名
    }
  },
  computed: {

    ids() {
      const ids = []
      this.multipleSelection.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  created() {
    // this.getTable()
    this.getSource()
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleEdit(){
      this.$refs.editList.open()
    },
     //选择所属数据源
     choseBelongs(id) {

      this.tableName=''
      this.$refs.blodCharts.seach('',id)
      this.listQuery.sourceId=id
      getTableList(this.listQuery).then(res=>{
        console.log(res,'tables')
        if(res.data.code==200){
          this.tableList=res.data.data
        }
      })
    }
    ,
    getSource() {
      getSourceList().then((res) => {
        if (res.data.code === 200) {
          this.sourceData = res.data.data
        }
      })
    },
    getList() {
      this.listLoading = true
      this.sankeyshow = false
    },
    handleCreate() {
      this.$refs.form.handleCreate()
    },
    handleUpdate(row) {
      this.$refs.form.handleUpdate(row.id)
    },
    handleDelete(row) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteconsanguinity(row.id).then((response) => {
          if (response.data.code === 0) {
            this.getList()
            this.$message.success(response.data.msg)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleBathDelete() {
      if (this.ids === '') {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定删除所选数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteconsanguinity(this.ids).then((response) => {
          if (response.data.code === 0) {
            this.getList()
            this.$message.success(response.data.msg)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    handleImport() {
      this.$refs.import.show()
    },
    handleExport() {
      this.downloadLoading = true
      exportconsanguinity(this.listQuery).then((response) => {
        this.downloadLoading = true
        if (response.data.code === 0) {
          import('@/vendor/Export2Excel').then((excel) => {
            excel.export_byte_to_excel(response.data.data.bytes, response.data.data.title)
            this.downloadLoading = false
          })
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    setSort() {
      const el = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        setData: function (dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: (evt) => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)
          // TODO：这里完成自己的业务处理
        },
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      // this.getList()
     this.$refs.blodCharts.seach(this.tableName,this.listQuery.sourceId)
    },
    handleClear(){
      this.listQuery.sourceId=''
      this.tableName=''
      this.$refs.blodCharts.seach(this.tableName,this.listQuery.sourceId)
    }
  },
}
</script>
<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 90px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}</style>
